<template>
	<div class="bigDiv">
		<el-form :inline="true" label-width="88px">
			<div class="topNav">
				<el-button type="text" icon="el-icon-search" @click="handelSearch">搜索</el-button>
			</div>
			<el-form-item label="智能柜编号" prop="code">
				<el-input v-model="queryParams.code" placeholder="智能柜编号" clearable size="small"
					@keyup.enter.native="handelSearch" />
			</el-form-item>
			<el-form-item label="智能柜状态">
				<el-select size="small" v-model="queryParams.status" placeholder="请选择" filterable clearable>
					<el-option v-for="index, item in statusMap" :label="index" :value="item">
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		
		<el-table :data="list" height="calc(100vh - 350px)">
			<el-table-column label="智能柜名字" align="center" prop="name" />
			<el-table-column label="智能柜编号" align="center" prop="code" />
			<el-table-column label="智能柜状态" align="center" prop="status" >
				<template slot-scope="scope">
					<span :class="scope.row.status" @click="changeStatus(scope.row)">{{ statusMap[scope.row.status] }}</span>
				</template>
			</el-table-column>
			<el-table-column label="创建时间" align="center" prop="createTime" />
		
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit"
						@click="handleEdit(scope.row)">编辑信息
					</el-button>
					
					<el-button size="mini" type="text" icon="el-icon-s-order"
						@click="handleEditAuth(scope.row)">授权管理
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<pagination v-show="total > 0 " :total="total" :page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize" @pagination="getList" />
			
		<el-dialog :title="detailTitle" :visible.sync="dialogDetailVisible" width="80vw" v-loading="dialogLoading">
			<el-form label-width="88px">
				<el-form-item label="智能柜编号" prop="code">
					<el-input v-model="info.code" placeholder="智能柜编号" clearable size="small" :disabled="true" />
				</el-form-item>
				<el-form-item label="智能柜名称" prop="name">
					<el-input v-model="info.name" placeholder="智能柜编号" clearable size="small" />
				</el-form-item>
			</el-form>
			<template slot="footer" class="dialog-footer">
				<el-button @click="save">保存</el-button>
			</template>
		</el-dialog>
		
		<el-dialog :title="detailTitle" :visible.sync="auth.dialogVisible" width="80vw">
			<el-form label-width="88px">
				<el-form-item>
					<el-button type="primary" icon="el-icon-plus" size="mini" @click="handelAddAuth">新增授权</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="auth.list" max-height="300" height="300">
				<el-table-column label="智能柜名字" align="center" prop="name" />
				<el-table-column label="智能柜编号" align="center" prop="code" />
				<el-table-column label="用户姓名" align="center" prop="userName" />
				<el-table-column label="备注" align="center" prop="remark" />
				<el-table-column label="授权时间" align="center" prop="createTime" />
			
				<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
					<template slot-scope="scope">
						<el-button size="mini" type="text" icon="el-icon-delete"
							@click="handleRemoerAuth(scope.row)">解除授权
						</el-button>
						
					</template>
				</el-table-column>
			</el-table>
			<template slot="footer" class="dialog-footer">
				<pagination v-show="auth.total > 0 " :total="auth.total" :page.sync="auth.queryParams.pageNum"
					:limit.sync="auth.queryParams.pageSize" @pagination="getAuthList" />
				<el-button @click="auth.dialogVisible = false">关闭</el-button>
			</template>
		</el-dialog>
		
		<el-dialog title="添加授权用户" :visible.sync="user.dialogVisible" width="40vw">
			<el-form :model="user.info" ref="form" label-width="88px" class="demo-dynamic">
				<el-form-item label="负责人">
					<el-select size="small" v-model="user.info.userId" placeholder="请输入用户名" filterable remote :remote-method="handleMethod">
						<el-option v-for="item in user.list" :key="item.id" :label="item.name + `（${item.account}）`"
							:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="备注">
					<el-input type="textarea" v-model="user.info.remark" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitFormAddAuth">确 定</el-button>
				<el-button @click="cancelAddAuth">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import { smartCabinetState, smartCabinetList, smartCabinetId, smartCabinetUpdate, smartCabinetAdd, smartCabinetUpdateStatus,
		smartCabinetGoodsList, smartCabinetGoodsAdd, smartCabinetGoodsremove,
		smartCabinetAuthList, smartCabinetAuthAdd, smartCabinetAuthRemove } from '@/api/smartCabinet.api';
	import { supplierSearchUserList } from "@/api/activiti/goods";
	export default{
		name: "smartCabinetIndex",
		data() {
			return {
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					code: undefined,
					status: undefined
				},
				total: 0,
				list: [],
				detailTitle: "",
				dialogDetailVisible: false,
				dialogLoading: false,
				info: {
					id: undefined
				},
				statusMap: {},
				dialogListVisible: false,
				auth: {
					queryParams: {
						pageNum: 1,
						pageSize: 10,
						supplierId: "",
						userId: "",
						smartCabinetId: ""
					},
					total: 0,
					list: [],
					dialogVisible: false
				},
				user: {
					info: {
						userId: "",
						smartCabinetId: "",
						remark: ""
					},
					list: [],
					dialogVisible: false
				}
			}
		},
		mounted() {
			this.getStateList();
			this.getList();
		},
		methods: {
			getStateList() {
				smartCabinetState().then(res => {
					this.statusMap = res;
				})
			},
			getList() {
				if(this.queryParams.status == "") {
					// 防止枚举控制符传报错
					this.queryParams.status = undefined
				}
				smartCabinetList(this.queryParams).then(res => {
					this.total = res.total
					this.list = res.rows
				})
			},
			getOne(id) {
				smartCabinetId(id).then(res => {
					this.info = res;
					this.dialogLoading = false;
				})
			},
			save() {
				if(this.info.id) {
					// 更新
					smartCabinetUpdate(this.info).then(res => {
						this.dialogDetailVisible = false;
						this.info = {};
						this.getList();
						this.$message.success("修改成功")
					})
				}else {
					// 新增
					smartCabinetAdd(this.info).then(res => {
						this.dialogDetailVisible = false;
						this.info = {};
						this.getList();
						this.$message.success("添加成功")
					})
				}
			},
			updateStatus(id, status) {
				smartCabinetUpdateStatus({id: id, status: status}).then(res => {
					this.getList();
					this.$message.success("修改成功")
				})
			},
			handelSearch() {
				this.getList();
			},
			handleEdit(row) {
				this.detailTitle = "编辑智能柜" + row.code;
				this.dialogDetailVisible = true;
				this.dialogLoading = true;
				this.getOne(row.id);
			},
			handelAdd() {
				this.info = {}
				this.detailTitle = "新增智能柜";
				this.dialogDetailVisible = true;
			},
			changeStatus(row) {
				if(row.status == "STOP") {
					this.updateStatus(row.id, "START")
					return;
				} 
				if(row.status == "START") {
					this.updateStatus(row.id, "STOP")
					return;
				} 
				this.$message.warning("只能变更【启用】【停用】状态的智能柜")
			},
			getAuthList() {
				smartCabinetAuthList(this.auth.queryParams).then(res => {
					this.auth.list = res.rows;
					this.auth.total = res.total;
				})
			},
			handleEditAuth(row) {
				this.auth.queryParams.smartCabinetId = row.id
				this.detailTitle = "智能柜：" + row.name
				this.getAuthList();
				this.auth.dialogVisible = true;
			},
			handleRemoerAuth(row) {
				this.$confirm(`用户【${row.userName}】将无法开始智能柜，是否继续？`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					smartCabinetAuthRemove(row.id).then(res => {
						this.$message.success("用户权限已删除")
						this.getAuthList();
					})
				}).catch((res) => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			handelAddAuth() {
				this.user.info.smartCabinetId = this.auth.queryParams.smartCabinetId;
				this.user.dialogVisible = true
			},
			handleMethod(query) {
				if(query != "") {
					supplierSearchUserList(query).then(res => {
						this.user.list = res;
					})
				}
			},
			submitFormAddAuth() {
				smartCabinetAuthAdd(this.user.info).then(res => {
					this.$message.success("添加成功");
					this.user.info = {
						userId: "",
						smartCabinetId: "",
						remark: ""
					};
					this.user.dialogVisible = false;
					this.getAuthList();
				})
			},
			cancelAddAuth() {
				this.user.info = {}
				this.user.dialogVisible = false
			}
		}
	}
</script>

<style>
	.STOP{
		color: #900;
	}
	.START{
		color: #090;
	}
	.DELETE{
		color: #d2d2d2;
	}
</style>